<template>
	<view class="page-container bg-grey">
		<up-navbar safeAreaInsetTop fixed placeholder bgColor="transparent" :autoBack="true">
			<template #center>
				<zjy-navbar-tabs :tabs="tabs" @tabClick="handleTabChange" :activeId="activeId" />
			</template>
		</up-navbar>
		<image :src="imgBaseUrl + 'promotion-header.png'" class="promotion-header" />
		<promotion-mine v-if="activeId == '1'" />
		<promotion-group v-if="activeId == '2'" />
	</view>
</template>

<script setup lang="ts">
import type { ZjyTabItem } from "@/types/common"
import promotionGroup from "./components/promotion-group.vue"
import promotionMine from "./components/promotion-mine.vue"

const imgBaseUrl = inject("imgBaseUrl")
const activeId = ref("1")
const tabs = ref<ZjyTabItem[]>([
	{
		name: "个人",
		id: "1",
	},
	{
		name: "团队",
		id: "2",
	},
])

const handleTabChange = (type: string) => {
	activeId.value = type
}
</script>
<style lang="scss" scoped>
.promotion-header {
	position: absolute;
	top: 0;
	width: 100%;
	height: 520rpx;
}
::v-deep .navbar-tabs {
	background: rgba(0, 0, 0, 0.12) !important;
	color: $c-white !important;
}
</style>
